<template>
    <div class="father">
        <h3>父组件</h3>
        {{ userName }}
        <!-- 使用v-model指令 -->
        <!-- <input type="text" v-model="userName"> -->

        <!-- v-model的本质是下面这行代码 -->
        <!-- <input type="text" :value="userName" @input="userName = (<HTMLInputElement>$event.target).value"> -->

        <!-- 组件标签上使用v-model指令 -->
        <!-- <AtguiguInput v-model="userName" /> -->

        <!-- 组件标签上v-model的本质  $event 为自定义组件传递的数据-->
        <AtguiguInput :modelValue="userName" 
        @update:model-value="userName = $event" />
    </div>
</template>

<script setup lang="ts" name="PersonMitt">
import { ref } from 'vue';
import AtguiguInput from "@/components/demo4/PorscheInput.vue";


let userName = ref('保时捷')

</script>

<style scoped>
.father {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
}
</style>
